<!--最近7/30日各品牌复购率-->
<template>
  <el-row :gutter="24" class="el-row">
    <el-col :span="24" class="el-card">

      <div id="tmRepeatChart" style="width:100%;height:340px;"/>

    </el-col>
  </el-row>
</template>


<script>
import * as echarts from 'echarts'
import api from '@/api/statistics/goods/goods'

export default {


  // 生命周期函数：内存准备完毕，页面渲染成功
  mounted() {
    this.init()
  },

  data() {
    return {
      showNum: 7,
      xData: [],
      yData: [],
      max: 1000,
      min: 1,
      searchObj: {
        recentDays: this.$parent.recentDays,
        dt: this.$parent.curDate
      }
    }
  },
  methods: {
    initData(xData) {
      if (xData && xData.length > 0) {
        this.min = xData[0]
        this.max = xData[xData.length - 1]
      }
    },

    // 加载banner列表数据
    init() {
      this.setChartData()
      this.searchObj.recentDays = this.$parent.recentDays
      this.searchObj.dt = this.$parent.curDate
      api.getTmRepeat(this.searchObj, this.showNum).then(response => {
        this.xData = response.data.xData
        this.yData = response.data.yData
        this.initData(this.xData)
        this.setChartData()
      }).catch(response => {
        console.log('失败' + response)
        // Vue.$message.error('服务器错误，请稍后再试')
        //reject(response)
      })
    },

    setChartData() {
      const option = {
        title: {
          text: '商品复购率排行',
          subtext: this.$parent.dateRange
        },
        yAxis: {
          type: 'category',
          data: this.yData
        },
        xAxis: {
          type: 'value'
        },
        series: [{
          data: this.xData,
          type: 'bar'
        }],
        visualMap: {
          orient: 'horizontal',
          left: 'center',
          min: this.min,
          max: this.max,
          text: [this.max, this.min],
          // Map the score column to color
          dimension: 0,
          inRange: {
            color: ['#FFD2D2', '#930000']
          }
        }

      };
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('tmRepeatChart'))
      myChart.clear()
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)

    }
  }
}
</script>

